<template>
	<div class="market_act_promote">
		<div class="content">
			<div class="fixed">
				<div class="selected">
					<img :src="infos[0].face_path" alt="" />
					<div>
						<h6>当前选择：{{ infos[0].sitename }}</h6>
						<p @click="$router.go(-1)">更换平台<span></span></p>
					</div>
				</div>
				<div class="selects">
					<h5>请选择推广平台</h5>
					<div class="sel_infos" @click.stop="selP">
						<img :class="{rotates:showList}" src="../../assets/images/marketAct/selDown.png" alt="" />
						<p><img :src="selImg" alt="" />{{ selName }}</p>
						<transition name="fade">
							<div v-if="showList" class="platform_lists">
								<div class="platform_list" :class="{sel:storeIndex===index}" v-for="(items,index) in allData" :key="index" @click.stop="selStore(index,items.catname,items.img)">
									<p><img :src="items.img" alt="" />{{ items.catname }}</p>
								</div>
							</div>
						</transition>
					</div>
				</div>
			</div>
			<div class="blank"></div>
			<div class="sign_lists">
				<div class="sign_list" v-for="(item,index) in pData" :key="index">
					<img :src="item.facePath" alt="" />
					<div class="div1">
						<p @click="sign(item.id)">立即报名<span></span></p>
					</div>
					<div class="div2">
						<h2>{{ infos[0].sitename }}</h2>						
					</div>
					<div class="div3">
						<p>{{ item.title }}</p>
						<p>最大报名人数：{{ item.maxJoinCount }}</p>
					</div>
					<div class="div4"></div>
				</div>
			</div>
			<div class="sign_lists" v-if="noPdata" style="margin-top:2rem;font-size:.33rem;color:#9e9e9e;">暂无数据</div>
		</div>
	</div>
</template>

<script>
	import { setCookie, getCookie, removeCookie, clearCookie } from '@/assets/js/cookie'
	import { getUrlParam } from '@/assets/js/getUrlParam'
	import { XHeader, Tab, TabItem } from 'vux';
	export default {
		name: 'market_act_promote',
		data() {
			return {
				infos: [],
				showList: false,
				selName: '宝店推广',
				selImg: require('../../assets/images/marketAct/storeP.png'),
				storeIndex: 0,
				allData: [{
					id: 1,
					catname: '宝店推广',
					img: require('../../assets/images/marketAct/storeP.png')
				}, {
					id: 2,
					catname: '推广团购',
					img: require('../../assets/images/marketAct/groupP.png')
				}, {
					id: 3,
					catname: '推广商品',
					img: require('../../assets/images/marketAct/goodsP.png')
				}, ],
				pData: [],
				noPdata: false
			}
		},
		components: {
			XHeader,
			Tab,
			TabItem
		},
		computed: {

		},
		created() {
			if(localStorage.getItem('promoteInfo')) {
				this.infos.push(JSON.parse(localStorage.getItem('promoteInfo')));
			}
		},
		mounted() {
			this.getPromote();
		},
		methods: {
			getPromote() {
				this.pData = [];
				this.$vux.loading.show();
				let obj = {};
				obj.token = getUrlParam('token') || '';
				obj.uid = getUrlParam('uid') || '';
				obj.shop_id = this.infos[0].shop_id;
				obj.joinType = this.storeIndex + 1;
				this.$axiosGet('/platform/service/storePromotion.json', obj, true).then(res => {
					if(res.code === 200) {
						this.noPdata = false;
						this.pData = res.data;
						this.$vux.loading.hide();
					} else if (res.code === 404) {
						this.noPdata = true;
						this.$vux.loading.hide();
					}
				})
			},
			selP() {
				this.showList = !this.showList;
			},
			selStore(id, name, img) {
				this.storeIndex = id;
				this.selName = name;
				this.selImg = img;
				this.showList = false;
				this.getPromote();
			},
			sign(id) {				
				this.$router.push({
					path: '/marketActSign',
					query: {
						id: id,
						promoteIndex: this.storeIndex + 1
					}
				});
			}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
	.market_act_promote {
		min-height: 100%;
		background: #fff;
		text-align: left;
		.content {
			.fixed {
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				background: #fff;
				z-index: 9;
				.selected {
					display: flex;
					align-items: center;
					padding: .28rem 0;
					>img {
						width: 1.34rem;
						height: 1.34rem;
						margin: 0 .2rem 0 .32rem;
					}
					>div {
						h6 {
							font-size: .36rem;
							color: #000;
							font-weight: 400;
						}
						p {
							font-size: .34rem;
							color: #1a98ec;
							display: flex;
							align-items: center;
							margin-top: .12rem;
							span {
								width: .2rem;
								height: .2rem;
								border-top: 1px solid #1a98ec;
								border-right: 1px solid #1a98ec;
								transform: rotate(45deg);
							}
						}
					}
				}
				.selects {
					display: flex;
					justify-content: space-between;
					padding: 0 .1rem 0 .45rem;
					>h5 {
						font-size: .32rem;
						color: #9e9e9e;
						font-weight: 400;
					}
					.sel_infos {
						display: flex;
						align-items: center;
						padding: 0 .12rem;
						width: 2.88rem;
						height: .54rem;
						background: #f3f3f3;
						border-radius: .05rem;
						position: relative;
						img {
							width: .2rem;
							height: .1rem;
							margin-right: .1rem;
						}
						.rotates {
							transform: rotate(180deg);
						}
						p {
							font-size: .28rem;
							color: #1a1a1a;
							display: flex;
							align-items: center;
							img {
								width: .4rem;
								height: .4rem;
							}
						}
						.platform_lists {
							position: absolute;
							top: .65rem;
							left: 0rem;
							width: 100%;
							text-align: left;
							border: 1px solid #d1d1d1;
							background: #fff;
							z-index: 99;
							.platform_list {
								font-size: .28rem;
								color: #1a1a1a;
								white-space: nowrap;
								padding: .15rem .4rem;
								p {
									display: flex;
									align-items: center;
									img {
										width: .4rem;
										height: .4rem;
									}
								}
							}
							.sel {
								background: #f3f3f3;
								color: red;
							}
						}
					}
				}
			}
			.blank {
				height: 3.2rem;
			}
			.sign_lists {
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				.sign_list {
					width: 6.6rem;
					height: 2rem;
					border-radius: .05rem;
					margin-bottom: .25rem;
					color: #fff;
					position: relative;					
					>img {
						position: absolute;
						left: 0;
						top: 0;
						width: 6.6rem;						
					}
					.div1 {
						position: absolute;
						right: .14rem;
						top: .16rem;
						width: 2rem;
						height: .8rem;
						border-radius: .1rem;
						background: #3097e6;	
						z-index: 5;											
						display: flex;
						align-items: center;
						justify-content: center;
						p {							
							font-size: .3rem;
							color: #fff;							
						}
					}
					.div2 {
						position: absolute;
						left: .36rem;
						top: .25rem;	
						background: transparent;
						z-index: 5;					
						h2 {
							font-size: .42rem;
						}
						p {
							font-size: .3rem;
							margin-top: .12rem;
						}
					}
					.div3 {
						position: absolute;
						left: 50%;
						bottom: .14rem;
						transform: translateX(-50%);
						width: 90%;
						display: flex;
						justify-content: space-between;						
						background: transparent;
						z-index: 5;
						p {
							font-size: .3rem;
						}
					}
					.div4 {
						position: absolute;
						left: 0;
						top: 0;
						width: 100%;
						height: 2.2rem;
						background: rgba(0,0,0,.5);						
					}
				}
			}
		}
	}
</style>